/*
 * La Boutique - Responsive HTML Template
 * By tfingi  
 * Created: 10. Sept 2013
 */



/* Table of Content
 ==================================================
* BASIC SETUP
* GENERAL ELEMENTS
* LISTS
* TABLES
* IMAGES
* GENERIC THINGS
* FLASH MESSAGE
* BUTTONS
* FORMS
* BOX
* PANELS (THESE TO REPLACE ALL BOXES)
* PAYMENT FORM
* MODAL
* TABLES
* AJAX LOADER
* HEADER
* NAVIGATION
* MAIN WRAPPER
* CRUMBS
* CONNECT
* FOOTER
* CREDITS
* CATEGORY
* PRODUCT LIST
* PRODUCT LIST SMALL
* RATINGS SMALL
* FLEXSLIDER
* CAPTIONS (used with Flex)
* PROMOS
* JCAROUSEL
* HOME / FEATURED
* PRODUCT
* NAV-TABS
* CART
* CHECKOUT
* STATIC PAGE
* SEARCH
* WELL
* OPTIONS PANEL
* HERO UNIT
* GRIDS
* ORDER HISTORY
* LABEL
* ALERTS
* WIDGET
* ADVERTS
* ISOTOPE
* BLOG
* STORE LOCATOR
* ROW COLLAPSE
* POST MINI
* MEGAMENU CUSTOMIZATION 
*/

@import "lesshat.less";




@error: #c24227;
@paleyellow: #feffc3;

/*---
| TYPOGRAPHY
---*/

@heading_font: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
@body_font: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
@script_font: "Shadows Into Light", cursive;

/*---
| MISC
---*/

@radius: 2px;

/*---
| BASIC SETUP
---*/

::-moz-selection {
	background: @paleyellow;
	color: @black;
}

body {
	overflow-y: scroll;
}

body {
	background-color: @light_grey;
	font-family: @body_font;
	color: @black;
	
	@media (max-width: 767px) {
		padding: 0;
	}
}

.wrapper {
	background-color: transparent;
}

.container {
	@media (max-width: 767px) {
		padding: 0 10px;
		width: 440px;
	}
	
	@media (max-width: 479px) {
		padding: 0 10px;
		width: 300px;
	}
}

/*---
| GENERAL ELEMENTS
---*/

p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, form, blockquote, canvas, caption, embed, fieldset, figure, video, progress, object, map, hr {
	margin: 0 0 20px;
}

a {
	color: @accent;
	text-decoration: underline;
	.transition(~"color 200ms ease-in-out, background-color 200ms ease-in-out, border-color 200ms ease-in-out");
	
	&:hover, &:focus {
		color: darken(@accent, 10%);
	}
}

hr {
	border-top: 1px solid @light_grey;
	margin: 40px 0;
}

hr.small {
	margin: 20px 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	letter-spacing: -0.5px;
	font-family: @heading_font;
	
	a {
		text-decoration: none;
		
		&:hover, &:focus {
			text-decoration: none;
		}
	}
}

h1 {
	font-size: 48px;
	line-height: 60px;
}

h2 {
	font-size: 42px;
	line-height: 52.5px;
}

h3 {
	font-size: 36px;
	line-height: 45px;
}

h4 {
	font-size: 30px;
	line-height: 37.5px;
}

h5 {
	font-size: 24px;
	line-height: 30px;
}

h6 {
	font-size: 18px;
	line-height: 22.5px;
}

code {
	border-bottom: 1px solid darken(@light_grey, 5%);
	background-color: @light_grey;
	color: lighten(@black, 10%);
	.border-radius(@radius);
}

pre {
	border-bottom: 1px solid darken(@light_grey, 5%);
	background-color: @light_grey;
	color: lighten(@black, 10%);
	font-size: 12px;
	padding: 10px;
	.border-radius(@radius);
}

ul {
	list-style-position: inside;
}

/*---
| LISTS
---*/

.list {
	list-style-position: inside;
}

.list .list {
	padding-left: 40px;
}

.list-disc {
	list-style-type: disc;
}

.list-square {
	list-style-type: square;
}

.list-border {
	list-style: none;
	
	li {
		border-left: 5px solid @accent;
		padding-left: 10px;
		margin-bottom: 5px;
	}
}

.list-chevron {
	list-style: none;
	li {
		&:before {
			content: "\f105";
			color: @accent;
			font-family: FontAwesome;
			margin-right: 5px;
		}
	}
}

.list-none {
	list-style-type: none;
}

.columns1 {
	.columns(20px 1);
}

.columns2 {
	.columns(20px 2); 
}

.columns3 {
	.columns(20px 3); 
}

.columns4 {
	.columns(20px 4); 
}

.columns1, .columns2, .columns3, .columns4 {
	@media (max-width: 767px) {
		.columns(20px 1);
	}
}


/*---
| TABLES
---*/

.table {
	td, th {
		border-top: 1px solid darken(@light_grey, 5%);
	}	
}

.table-striped {
	tbody > tr:nth-child(2n+1) > td,
	tbody > tr:nth-child(2n+1) > th {
		background-color: @light_grey;
	}	
}

.table-bordered {
	border: 1px solid darken(@light_grey, 5%);
	.border-radius(@radius);
	
	thead:first-child tr:first-child > th:first-child,
	thead:first-child tr:first-child > td:first-child,
	tbody:first-child tr:first-child > th:first-child, 
	tbody:first-child tr:first-child > td:first-child {
		.border-top-left-radius(@radius);
	}
	
	thead:first-child tr:first-child > th:last-child,
	thead:first-child tr:first-child > td:last-child,
	tbody:first-child tr:first-child > th:last-child, 
	tbody:first-child tr:first-child > td:last-child {
		.border-top-right-radius(@radius);
	}
	
	thead:last-child tr:last-child > th:first-child,
	thead:last-child tr:last-child > td:first-child
	tbody:last-child tr:last-child > th:first-child,
	tbody:last-child tr:last-child > td:first-child,
	tfoot:last-child tr:last-child > th:first-child,
	tfoot:last-child tr:last-child > td:first-child {
		.border-bottom-left-radius(@radius);
	}
	
	thead:last-child tr:last-child > th:last-child,
	thead:last-child tr:last-child > td:last-child,
	tbody:last-child tr:last-child > th:last-child,
	tbody:last-child tr:last-child > td:last-child,
	tfoot:last-child tr:last-child > th:last-child,
	tfoot:last-child tr:last-child > td:last-child {
		.border-bottom-right-radius(@radius);
	}
	
}

.table-hover {
	tbody tr:hover > th,
	tbody tr:hover > td {
		background-color: @accent;
		color: @white;
	}
}

/*---
| IMAGES
---*/

.img-rounded {
	.border-radius(10px);
}

.img-circle {
	.border-radius(9999px);
}

.img-polaroid {
	border: 1px solid darken(@light_grey, 10px);
	padding: 10px;
	.box-sizing(border-box);
	.box-shadow(none);
	.border-radius(@radius);
}

/*---
| GENERIC THINGS
---*/

.script {
	font-family: @script_font;
	font-weight: 400;
	font-size: 150%;
}

.price-list {
	margin-bottom: -20px;
	li {
		.extend;
		border-bottom: 1px dotted @light_grey;
		padding-top: 15px;
		padding-bottom: 15px;
		list-style: none;
		font-size: 13px;
		position: relative;
		
		strong {
			position: absolute;
			right: 20px;
		}
		
		em {
			display: block;
			margin-top: 10px;
		}
	}
	
	li.important {
		font-size: 14px;
		color: @accent;
	}
}

/*---
| FLASH MESSAGE
---*/

.flash {
	background-color: @accent;
	font-size: 12px;
	color: @white;
	padding: 10px;
	margin-bottom: 20px;
	position: relative;
	
	a.remove {
		display: block;
		width: 14px; height: 14px;
		text-align: center;
		color: fadeout(@black, 40%);
		text-shadow: 0 1px fadeout(@white, 75%);
		text-decoration: none;
		font-size: 14px;
		line-height: 14px;
		position: absolute;
		top: 4px; right: 4px;
		
		&:hover {
			color: fadeout(@black, 20%);
		}
	}
}

.flash.error {
	background-color: @error;
}

/*---
| BUTTONS
---*/

.btn {
	font-family: @body_font;
	text-transform: uppercase;
	color: @white;
	font-weight: 600;
	text-shadow: none;
	font-size: 12px;
	border: none;
	background-color: darken(@light_grey, 20%);
	background-image: none;
	text-decoration: none;
	letter-spacing: 0.5px;
	word-spacing: 1px;
	.border-radius(2px);
	.box-shadow(inset 0 -2px 0 fadeout(@black, 95%));

	
	&:hover, &:focus, &:active {
		color: @white;
		background-position: inherit;
		background-color: darken(@light_grey, 25%);
	}
	
	&:focus, &:active {
		.box-shadow(inset 0 1px 2px fadeout(@black, 50%));
	}

}

.btn[disabled], .btn.disabled {
	color: @white;
	background-color: @light_grey;
	cursor: no-drop;
	.opacity(1);
	
	&:hover, &:focus, &:active {
		background-color: @light_grey;
		.box-shadow(none);
	}
}

.btn-primary {
	background-color: @accent;
	&:hover, &:focus, &:active {
		background-color: darken(@accent, 5%);
	}
}

.btn-turquoise {
	background-color: @turquoise;
	&:hover, &:focus, &:active {
		background-color: darken(@turquoise, 5%);
	}
}

.btn-greensea {
	background-color: @greensea;
	&:hover, &:focus, &:active {
		background-color: darken(@greensea, 5%);
	}
}

.btn-emerland {
	background-color: @emerland;
	&:hover, &:focus, &:active {
		background-color: darken(@emerland, 5%);
	}
}

.btn-nephritis {
	background-color: @nephritis;
	&:hover, &:focus, &:active {
		background-color: darken(@nephritis, 5%);
	}
}

.btn-peterriver {
	background-color: @peterriver;
	&:hover, &:focus, &:active {
		background-color: darken(@peterriver, 5%);
	}
}

.btn-belizehole {
	background-color: @belizehole;
	&:hover, &:focus, &:active {
		background-color: darken(@belizehole, 5%);
	}
}

.btn-amethyst {
	background-color: @amethyst;
	&:hover, &:focus, &:active {
		background-color: darken(@amethyst, 5%);
	}
}

.btn-wisteria {
	background-color: @wisteria;
	&:hover, &:focus, &:active {
		background-color: darken(@wisteria, 5%);
	}
}

.btn-wetasphalt {
	background-color: @wetasphalt;
	&:hover, &:focus, &:active {
		background-color: darken(@wetasphalt, 5%);
	}
}

.btn-midnightblue {
	background-color: @midnightblue;
	&:hover, &:focus, &:active {
		background-color: darken(@midnightblue, 5%);
	}
}

.btn-sunflower {
	background-color: @sunflower;
	&:hover, &:focus, &:active {
		background-color: darken(@sunflower, 5%);
	}
}

.btn-orange {
	background-color: @orange;
	&:hover, &:focus, &:active {
		background-color: darken(@orange, 5%);
	}
}

.btn-carrot {
	background-color: @carrot;
	&:hover, &:focus, &:active {
		background-color: darken(@carrot, 5%);
	}
}


.btn-pumpkin {
	background-color: @pumpkin;
	&:hover, &:focus, &:active {
		background-color: darken(@pumpkin, 5%);
	}
}

.btn-alizarin {
	background-color: @alizarin;
	&:hover, &:focus, &:active {
		background-color: darken(@alizarin, 5%);
	}
}

.btn-pomegranate {
	background-color: @pomegranate;
	&:hover, &:focus, &:active {
		background-color: darken(@pomegranate, 5%);
	}
}

.btn-facebook {
	background-color: #3B5998;
	&:hover, &:focus, &:active {
		background-color: darken(#3B5998, 5%);
	}
}

.btn-twitter {
	background-color: #1ab2e8;
	&:hover, &:focus, &:active {
		background-color: darken(#1ab2e8, 5%);
	}
}

.btn-googleplus {
	background-color: #dd4a38;	
	&:hover, &:focus, &:active {
		background-color: darken(#dd4a38, 5%);
	}
}

.btn-pinterest {
	background-color: #ce2127;	
	&:hover, &:focus, &:active {
		background-color: darken(#ce2127, 5%);
	}
}

.btn { padding: 12px 20px; }
.btn-large { padding: 16px 24px }
.btn-small { padding: 8px 16px; }
.btn-mini { padding: 4px 12px; }


.input-append .btn,
.input-prepend .btn,
.input-append .btn:last-child,
.input-prepend .btn:first-child {
	padding: 4px 20px;
	border: 1px solid darken(@light_grey, 15%);
	.border-radius(0px);
	.box-shadow(inset 0 1px 2px fadeout(@black, 90%));
}

@media (max-width: 479px) {
	.mm20 {
		margin-top: 20px;
	}
}

/*---
| FORMS
---*/

form { margin-bottom: 0; }

label {
	font-size: 12px;
	margin-bottom: 2px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	font-family: @body_font;
	font-size: 13px;
	font-weight: 300;
	.border-radius(0px);
	
	&:focus {
		
	}
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	border-color: darken(@light_grey, 15%);
	.box-shadow(inset 0 1px 2px fadeout(@black, 90%));
	
	&:focus {
		background-color: lighten(@light_grey, 2.5%);
		border-color: darken(@light_grey, 15%);
		.box-shadow(inset 0 1px 2px fadeout(@black, 80%));
	}
}

textarea {
	min-height: 60px !important;
	max-height: 240px !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

.control-group {
	margin-bottom: 10px;
}

/*---
| BOX
---*/

.hgroup.title {
	.extend;
	border-bottom: 1px solid @light_grey;
	padding-bottom: 20px;
	background-color: @white;
			
	h1, h2, h3, h4, h5, h6 {
		font-size: 14px;
		line-height: 21px;
		color: lighten(@black, 30%);
		font-weight: 400;
		margin: 0;
		
		&:first-child {
			font-size: 16px;
			line-height: 24px;
			color: @black;
			font-weight: 700;
		}
	}
}

.box {
	margin-bottom: 20px;
	background-color: @white;
	padding: 20px;
	.border-radius(@radius);
	.box-shadow(0 1px 2px fadeout(@black, 75%));
	
	.box-header {
		margin: 0 -20px;
		padding: 0 20px;
		border-bottom: 1px solid @light_grey;
		padding-bottom: 20px;
		background-color: @white;
		
		h3 {
			font-size: 16px;
			line-height: 24px;
			color: @black;
			font-weight: 700;
			margin: 0;
		}
		
		h5 {
			font-size: 14px;
			line-height: 21px;
			color: lighten(@black, 30%);
			font-weight: 400;
			margin: 0;
		}
	}
	
	.box-image {
		margin: -20px -20px 20px;
		border-bottom: 1px solid @light_grey;
		
		a, img {
			display: block;
		}
	}
	
	.box-body,
	.box-content {
		margin-top: 20px;
		
		> *:last-child {
			margin-bottom: 0;
		}

		.price-list {
			margin: -20px;
			
			li {
				margin: 0;
			}
		}
	}
	
	.box-footer {
		.clearfix();
		margin: 20px -20px -20px;
		padding: 20px;
		border-top: 1px solid @light_grey;
		background-color: darken(@white, 2.5%);
	}
	
	.box-header + .box-footer {
		border-top: none;
		margin-top: 0;
	}
	
	.box-content.highlight {
		.extend;
		padding: 20px;
		background-color: darken(@white, 2.5%);
		margin-bottom: -20px;
	}
	
	.buttons {
		.clearfix();
		margin: 20px -20px -20px;
		padding: 20px;
		border-top: 1px solid @light_grey;
		background-color: darken(@white, 2.5%);
	}
	
	.hgroup.title + .buttons {
		border-top: none;
		margin-top: 0;
	}
}

.box.border-top {
	border-top: 5px solid @accent;
}

.box.border-right {
	border-right: 5px solid @accent;
}

.box.border-bottom {
	border-bottom: 5px solid @accent;
}

.box.border-left {
	border-left: 5px solid @accent;
}

.extend {
	margin: 0 -20px;
	padding: 0 20px;
}



/*---
| PANELS (THESE TO REPLACE ALL BOXES)
---*/

.panel {
	margin-bottom: 20px;
	background-color: @white;
	padding: 20px;
	.border-radius(@radius);
	.box-shadow(0 1px 2px fadeout(@black, 75%));
	
	.panel-content {
		margin: -20px;
		padding: 20px;
	}
}

.panel.border-top {
	border-top: 5px solid @accent;
}

.panel.border-right {
	border-right: 5px solid @accent;
}

.panel.border-bottom {
	border-bottom: 5px solid @accent;
}

.panel.border-left {
	border-left: 5px solid @accent;
}


.panel-navigation {
	list-style: none;
	margin: -20px 0;
	font-size: 12px;
	
	.panel-navigation {
		margin: 0;
	}
	
	a {
		display: block;
		padding: 15px 20px;
		border-bottom: 1px solid @light_grey;
		margin: 0 -20px;
		color: @black;
		text-decoration: none;
		position: relative;
		
		&:hover {
			background-color: @accent;
			color: @white;
			border-color: @accent;
			
			.toggle {
				color: @accent;
				background-color: @white;
			}
		}
	}
}

.panel-navigation.primary {

	> li > a {
		font-size: 16px;
		line-height: 24px;
		font-weight: 700;
	}
	
	.toggle {
		margin-top: 2px;
		font-weight: 400;
		font-size: 14px;
		
		line-height: 20px;
		height: 20px; width: 20px;
		text-align: center;
		position: absolute;
		right: 20px;
		background-color: darken(@light_grey, 10%);
		color: @white;
		.border-radius(@radius);
	}
}

/*---
| PAYMENT FORM
---*/

.payment-form {
	> div {
		margin-top: 20px;
	}
	
	ul.form {
		list-style: none;
		
		> li {
			margin-bottom: 20px;
		}
	}
}


/*---
| MODAL
---*/

.modal {
	border: none;
	.box-shadow(0 1px 2px fadeout(@black, 50%));
	.border-radius(@radius);
	
	.modal-header {
		padding: 20px;
		
		.hgroup.title {
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom: none;
		}
				
		button {
			margin: 0;
		}
	}
	
	.modal-body {
		padding: 20px;
	}
	
	.modal-footer {
		padding: 20px;
		border-top: 1px solid @light_grey;
		background-color: darken(@white, 2.5%);
		text-align: left;
		.border-radius(0);
		.box-shadow(none);
	}
	
	.modal-head + modal-footer {
		border-top: none;
	}
}

.modal-backdrop {
	background-color: @black;
}

.modal-backdrop, .modal-backdrop.fade.in {
	.opacity(0.5);
}

/*---
| TABLES
---*/

.styled-table {
	width: 100%;
	margin-bottom: 20px;
	
	thead {
		th, td {
			font-size: 12px;
			color: @black;
			border-bottom: 1px solid darken(@light_grey, 10%);
			text-transform: uppercase;
		}
		
		th {
			font-weight: 600;
		}
		
		td {
			font-weight: 400;
		}
	}
	
	tbody {
		th, td {
			border-bottom: 1px solid @light_grey;
		}
	}
	
	thead,
	tbody {
		th, td {
			text-align: left;
			padding: 10px;
			vertical-align: top;
					
			&:first-child {
				padding-left: 0;
			}
			
			&:last-child {
				padding-right: 0;
			}
		}
		
		th.text-left, td.text-left { text-align: left; }
		th.text-center, td.text-center { text-align: center; }
		th.text-right, td.text-right { text-align: right; }
	}
}


/*---
| HELPERS
---*/

.clearfix() {
	/*zoom: 1;*/
	&:before { content: ''; display: block; }
	&:after { content: ''; display: table; clear: both; }
}


/*---
| AJAX LOADER
---*/

.ajax_loading_indicator {
	position: fixed;
	background: url('../../img/loader.gif') center center no-repeat fadeout(@black, 50%);
	width: 100%; height: 100%;
	
	> span { display: none; }
}


/*=====
	
	HEADER

=====*/

.header {
	position: relative;
	z-index: 250;
	
	a {
		color: inherit;
		font-weight: 700;
		text-decoration: none;
		font-size: 13px;
	}
	
}
	
.header .top {
	position: relative;
	z-index: 10;
	background-color: @black;
	height: 32px;
	font-size: 12px;
	line-height: 32px;
	color: @white;
	
	p, ul {
		margin-bottom: 0;
	}
	
	a {
		font-size: 12px;
		color: inherit;
		text-decoration: none;
		color: @white;
		
		&:hover {
			color: @accent;
			text-decoration: none;
			color: lighten(@black, 50%);
		}
	}
}
	
.header .bottom {
	background-color: @white;
	padding: 0;
	.box-shadow(0 1px 2px fadeout(@black, 80%));
	.clearfix();
	
	.container {
		@media (max-width: 767px) {
			position: relative;
			/*margin-bottom: -30px;*/
			height: 150px;
			overflow: hidden;
		}
	}
	
}
		
.header .logo {
	padding: 10px 0;
	
	a {
		display: inline-block;
		height: 60px;
		text-decoration: none;
	}
			
	img {
		max-height: 100%;
	}
	
	@media (max-width: 767px) {
		width: auto;
		float: none;
		margin: 0;
		
		a {
			text-align: center;
		}
	}
}
				
.search {
	padding: 25px 0;
	
	@media (max-width: 767px) {
		padding: 20px 0;
	}
	
	.qs_s {
		position: relative;		
		#query {
			background-color: @light_grey;
			border-color: darken(@light_grey, 10%);
			padding: 4px 14px;
			margin-bottom: 0;
			width: 100%;
			height: 30px;
			.box-sizing(border-box);
			.border-radius(9999px);
			.box-shadow(inset 0 1px 2px fadeout(@black, 80%));
			
			&:focus {	
				background-color: lighten(@light_grey, 2.5%);
				.box-shadow(inset 0 1px 2px fadeout(@black, 80%));
			}
		}
	}
	
	#autocomplete-results {
		position: absolute;
		width: 100%;
		
		ul {
			margin: 6px 0 0;
			background-color: @white;
			border-left: 5px solid @accent;
			position: relative;
			.border-radius(@radius);
			.box-shadow(0 1px 2px fadeout(@black, 50%));
			
			&:before {
				content: "";
				display: block;
				width: 26px; height: 14px;
				position: absolute;
				left: 50%; top: -14px;
				margin-left: -13px;
				background-image: url('../../img/triangle.png');
				z-index: 100;
			}
			
			li {
				list-style: none;
				border-top: 1px solid @light_grey;
				
				&:first-child {
					border-top: none;
				}
			}
			
			a { 
				display: block;
				padding: 10px;
				color: inherit;
				text-decoration: none;
				
				.image {
					width: 30px; height: 30px;
					overflow: hidden;
					float: left;
					margin-right: 10px;
					
					img {
						display: block;
					}
				}
				
				h6 {
					line-height: 30px;
					font-size: 12px;
					margin: 0;
					font-weight: 400;
				}
				
				&:hover {
					background-color: @light_grey;
				}
			}
			
			li.active a {
				text-decoration: none;
				background-color: @accent;
				
				h6 {
					font-weight: 700;
					color: @white;
				}
			}
		}
	}
}
		
.mini-cart {
	padding: 20px 0;
	
	@media (max-width: 767px) {
		display: block;
		position: absolute;
		top: 0; right: 0;
	}
	
	a {
		display: block;
		line-height: 40px;
		float: right;
		height: 40px; width: 40px;
		background: url('../../img/cart.png') no-repeat left center;
		position: relative;
		
		> span {
			display: inline-block;
			width: 20px; height: 20px;
			line-height: 20px;
			font-size: 11px;
			text-align: center;
			background-color: @accent;
			color: @white;
			position: absolute;
			top: 0;
			right: 0px;
			.border-radius(12px);
		}
	}	
}

/*---
| NAVIGATION
---*/

nav.navigation {
	background-color: @lighter_grey;
	position: relative;
	z-index: 240;
	.box-shadow(0 1px 2px fadeout(@black, 90%));	
	

	@media (max-width: 979px) {	
		.container{
			.row .span9{
				width: auto;
				float: none;
				
			}
		}
	}
}

.main-menu {
	margin: 0;
	height: auto;
	.clearfix();

	li {
		list-style: none;
	}
	
	a {
		text-decoration: none;
		font-size: 12px;
		display: block;
	}

	li{
		position: relative;

		ul {
			display: none;
			position: absolute;
			
			border-top: 5px solid @accent;
			background-color: @white;
			/*overflow: hidden;*/
			margin: 0;
			.border-radius(@radius);
			.box-shadow(0 1px 2px fadeout(@black, 75%));
			z-index: 1000;
			min-width: 200px;

			li{
			
				a {
					padding: 15px 20px;
					border-top: 1px solid @light_grey;
					color: @black;


				}


				&.menu-item-has-children{
					> a{

						&:before{
							font-family: fontAwesome;
							content: "\f0da";
							float: right;
							color: @black;

						}								
					}									
				}				

				
			}
			
			li:first-child a {
				border-top: none;
			}

			li{
				ul{
					left: 190px;
					top: 10px;
				}
			}
		}

		&:hover{

			> a{
				
				background-color: @accent;
				color: @white;

				
			

			}

			&.menu-item-has-children{

				> a{
					&:before{
						color: @white;
					}
				}

			}

			> ul{
			
	
				display: block;
			
			}
		}
	}

		
	> li {
		
		float: left;

		> ul{
			left: -9999px;
			top: -9999px;
		}
		
		
		> a {
			padding: 15px 30px 15px 0;
			color: lighten(@black, 10%);			
			text-transform: uppercase;
		}
		
		
		&:hover > a,
		> a:hover {
			color: @accent;
			background: none;
		}




	}

	> li{
		ul{
			li{
				ul{
					li{
						> ul{
							left: auto;
							right: 190px;		

							li{
								ul{
									right: auto;
									left: 190px;
								}
							}
						}
					}
					
				}
			}
		}
	}


	.megamenu-parent{
		position: static;
	}


	.megamenu-sub-menu{
		/*margin-left: 0px !important;*/
		padding: 20px;
		padding-top: 0px;


		ul{
			position: static;
			left: auto;
			top: auto;
			right: auto;
			min-width: 0px;

		}

		li{
			&:hover{
				ul{
					left: auto;
					top: auto;
				}
			}
		}


		.megamenu-inner-sub-menu{
			width: 100%;

			> li{
				display: block;
				padding: 0px;
				margin: 0px;
				border: 0px;

				a{
					display: block;
					background: none;
					color: @black;					
					padding: 5px;
					margin: 0px;
					border: 0px;
					font-size: 12px;

					&:before{
						content: "\f105";
						color: @accent;
						font-family: FontAwesome;
						margin-right: 5px;
					}

					&:hover{
						color: @accent;
					}
				}
			}				
		}





		.megamenu-column{
			

			float: left;
			padding-right: 20px;

			ul{
				.box-shadow(none);
				border: 0px;
				padding: 0px;			
			}

			a{
				color: @accent;

				&:before{
					content:"";
				}

				&:hover{
					color: @black;
				}
			}
		}	

		.megamenu-content{
			/*padding-top: 20px;*/
			font-size: 12px;

			
			.map-canvas,
			img,
			iframe{
				margin: 0px;
				padding: 0px;
				display: block;
			}
			.map-canvas{
				margin-bottom: 20px;
			}			
			
			[class*="span"]{
				width: 100%;
			}

			ul{
				display: block;
				.box-shadow(none);
				border: 0px;
				list-style: disc;

				li{
					border: 0px;
					list-style: disc;

					a{
						border: 0px;
						background: none;
						color: @black;

						&:hover{
							color: @accent;
							background: none;
						}
					}
				}

			}
		}

		.megamenu-inner-sub-menu .megamenu-heading,
		.megamenu-heading {
			margin: 0px;
			padding: 0px;
			padding-top: 20px;
			left: auto;
			right: auto;
			clear: both;

		}

		.megamenu-inner-sub-menu .megamenu-heading a:hover,
		.megamenu-inner-sub-menu .megamenu-heading:hover a,
		.megamenu-inner-sub-menu .megamenu-heading a,

		.megamenu-heading a:hover,
		.megamenu-heading:hover a,
		.megamenu-heading a{
			background: none;
			margin: 0px;
			padding: 0px;
			display: block;
			color: @black;
			font-weight: bold;
			font-size: 16px;
			cursor: text;
			margin-bottom: 20px;
			display: block;
			border: 0px;
			.transition(none);

			&:before{
				display: none;
			}
		}

		input[type="text"],
		input[type="password"],
		input[type="date"],
		input[type="datetime"],
		input[type="email"],
		input[type="number"],
		input[type="search"],
		input[type="tel"],
		input[type="time"],
		input[type="url"],
		textarea,
		select{
			min-height: 30px;
			width: 100%;
		}
		textarea{
			height: 100px;
		}
	}	
}

.megamenu_container{
	height: auto;
	
}

.main-menu-button{
	display: none !important;
}


@media only screen and (min-width: 979px) {
	.main-menu {
			
		> li {
					
			&:hover{
				> ul{
				
					left: 0px;
					top: 50px;
					display: block;
				
				}
			}
		}
	}
}

@media only screen and (max-width: 979px) {

	.main-menu-button{
		display: block !important;
		.border-radius(2px);
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		margin-top: 10px;
		
		color: @white;
		text-decoration: none;
		border: 0px;
		background-color: @accent;
		color: @white;

		&:after{
			font-family: fontAwesome;
			content: "\f078";
			font-weight: bold;
			float: right;

		}

		&:hover,&:focus,&:active{
			background-color: fade(@accent,80%);
			color:@white;
			text-decoration: none;
		}

		
	}

	.megamenu_container{
		overflow: hidden;
		.transition(height 0.5s ease);
		padding-bottom: 10px;
	
	}

	.main-menu {
		position: relative;		
		margin-bottom: 5px;
		right: 0%;
		display: none;
		


		&.selected{
			display: block;
		}

		li{

			display: block;
			float: none;
			margin-top: 1px;
			position: static;

			ul li a,
			a{
				display: block;
				float: none;	
				padding: 10px 15px;		
				border: 0px;


				&:hover{
					background-color:@accent;
					.border-radius(2px);
					color: @white !important;
				}
			}



			&.back{
				> a{
					&:before{
						font-family: fontAwesome;
						content: "\f0d9";
						margin-right: 5px;
						
					}
				}
			}

			&.menu-item-has-children{
				> a{

					&:before{
						font-family: fontAwesome;
						content: "\f0da";
						float: right;
						/*color: @black;*/

					}								
				}									
			}	

			&.megamenu-parent{
				display: none;
			}


			ul,
			ul li ul,
			ul li ul li ul,
			ul li ul li ul li ul{
				/*display: block;*/
				/*position: static;*/
				display: none;
				width: 100%;
				
				position: absolute;
				left: 100%;
				right: auto;
				top: 0px;
				.box-shadow(none);
				background: none;
				border: 0px;
			}

			&.selected{
				> ul{
					display: block;
				}
			}



		}

		
	}
}

/*---
| MAIN
---*/

.main {
	padding: 40px 0 80px;
}


/*---
| CRUMBS
---*/

.crumbs {
	background-color: @lighter_grey;
	position: relative;
	z-index: 40;
	.box-shadow(0 1px 2px fadeout(@black, 90%));
}

.breadcrumb {
	background-color: transparent;
	margin: 0;
	font-size: 12px;
	padding: 15px 0;
	.border-radius(0px);
	
	li {
		text-shadow: none;
		
		&:last-child a:after {
			content: "";
		}
	}
	
	a {
		color: inherit;
		text-decoration: none;
		
		&:hover, &:focus {
			color: @accent;
		}
		
		&:after {
			content: "\f105";
			font-family: FontAwesome;
			margin: 0 5px 0 8px;
			color: lighten(@black, 40%);
		}
	}
	
	.active {
		color: lighten(@black, 30%);
	}
}

/*---
| CONNECT
---*/

.twitter-bar {
	padding: 20px 0;
	background-color: @lighter_grey;
	position: relative;
	z-index: 40;
	.box-shadow(0 -1px 2px fadeout(@black, 90%));
}

.twitter-bar {
	.icon {
		font-size: 16px;
		line-height: 32px;
		background-color: #00acee;
		color: @white;
		float: left;
		width: 32px;
		text-align: center;
		margin-right: 10px;
		.box-shadow(0 1px 2px fadeout(@black, 80%));
		.border-radius(@radius);
	}
	
	#tweets {
		float: left;
		
	}
	@media (max-width: 767px) {
		#tweets {
			max-width: 390px;
		}
	}
	
	@media (max-width: 480px) {
		#tweets {
			max-width: 250px;
		}
	}
}

.tweet_list {
	list-style: none;
	margin: 0;
	
	.tweet {
		color: lighten(@black, 25%);
		font-size: 12px;
		line-height: 18px;
		.clearfix();

		.avatar {
			height: 32px;
			width: 32px;
			float: left;
			margin-right: 10px;
			overflow: hidden;
			.box-shadow(0 1px 2px fadeout(@black, 80%));
			.border-radius(@radius);
			
			img {
				display: block;
				height: 32px;
				width: 32px;
			}
		}
		
		.text {
			margin: 7px 0;
			float: left;
			
		}
		@media (max-width: 767px) {
			.text {
				max-width: 340px;
			}
		}
		
		@media (max-width: 480px) {
			.text {
				max-width: 200px;
			}
		}
		
		.tweet_time {
			margin-left: 5px;
			font-size: 10px;
			font-style: italic;
		}
		
		a {
			color: inherit;
			text-decoration: none;
			
			&:hover {
				color: @accent;
			}
		}
	}
}

/*---
| FOOTER
---*/

.footer {
	position: relative;
	z-index: 50;
	background-color: @white;
	padding: 40px 0;
	font-size: 13px;
	color: lighten(@black, 20%);
	.box-shadow(0 -1px 2px fadeout(@black, 80%));
	
	h6 {
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0 0 20px;
		color: @black;
	}
	
	.links {
		margin: 0;
		
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
		
		li {
			list-style: none;
		}
		
		a {
			color: lighten(@black, 20%);
			text-decoration: none;
			
			&:hover, &:focus {
				color: @accent;
			}
		}
	}
	
	.confidence {
		img {
			display: block;
			margin: 20px 0;
		}
	}
	
	.twitter {
		font-size: 12px;
		line-height: 18px;
		
		.tweet_list {
			margin: 0;
			
			li {
				list-style: none;
				border-top: 1px solid @light_grey;
				padding-top: 20px;
				margin-top: 20px;
				.clearfix();
				
				.avatar {
					float: left;
					width: 10%;
					margin-right: 5%;
				}
				
				.text {
					width: 85%;
					float: left;
					
					a {
						text-decoration: none;
					}
					
					.tweet_text,
					.tweet_time {
						display: block;
					}
					
					.tweet_time {
						margin-top: 10px;
						font-size: 11px;
						font-style: italic;
						
						a {
							color: lighten(@black, 40%);
							text-decoration: none;
							
							&:hover, &:focus {
								color: @accent;
							}
						}
					}
				}
			}
			
			li.tweet_first {
				border-top: none;
				margin-top: 0;
				padding-top: 0;
			}
		}
	}
	
	
	.newsletter {
		form {
			margin-bottom: 20px;
		}
		
		.input-append {
			margin-bottom: 0;
		}
		
		p {
			font-size: 12px;
			line-height: 18px;
			color: lighten(@black, 30%);
			font-style: italic;
		}
	}
	
	
}


.main-menu .social,
.footer .social {
	.border-radius(0px);
	ul {
		margin-left: -6px;
		margin-bottom: -6px;
		.clearfix();
	}
	
	li {
		list-style: none;
		padding: 0;
		margin: 0px;
		margin-left: 6px;
		margin-bottom: 6px;
		float: left;
		display: block;


	}
	
	a {
		display: block;
		margin: 0px;
		padding: 0px;
		width: 24px; 
		height: 24px;
		text-indent: -9999px;
		background-image: url('../../img/social.png') !important;
		background-repeat: no-repeat;
		text-decoration: none;
		.opacity(0.7);
		.transition(all 300ms ease-in-out);
		
		&:hover, &:focus {
			.opacity(1);
		}
	}
	
	a.twitter    { background-position: 0 0 !important; }
	a.facebook   { background-position: -24px 0 !important; }
	a.pinterest  { background-position: -48px 0 !important; }
	a.youtube    { background-position: -72px 0 !important; }
	a.vimeo      { background-position: -96px 0 !important; }
	a.flickr     { background-position: -120px 0 !important; }
	a.googleplus { background-position: -144px 0 !important; }
	a.dribbble   { background-position: -168px 0 !important; }
	a.forrst     { background-position: -192px 0 !important; }
	a.tumblr     { background-position: -216px 0 !important; }
	a.digg       { background-position: -240px 0 !important; }
	a.linkedin   { background-position: -264px 0 !important; }
	a.instagram  { background-position: -288px 0 !important; }
	
}

.main-menu .social{
	li{
	
		&:first-child{
			margin-left:0px;
		}
	}
}

/*---
| CREDITS
---*/

.credits {
	background-color: @black;
	padding: 10px 0;
	color: lighten(@black, 30%);
	font-size: 12px;
	line-height: 18px;
	
	p {
		margin-bottom: 0;
	}
	
	a {
		color: lighten(@black, 40%);
		text-decoration: none;
		.transition(~"all 200ms ease-in-out");
		
		&:hover {
			color: lighten(@black, 50%);
		}
	}
}


/*---
| CATEGORY
---*/

.category .sidebar {
	.children {
		font-size: 12px;
		
		.title a {
			color: @black;
			text-decoration: none;
			
			&:hover {
				color: @accent;
			}
		}
	}
	
	.category-list {
		margin: 0 0 -20px;
		
		li {
			list-style: none;
			
			> .category-list .padding {
				padding-left: 40px;
			}
		}
		
		li.current a {
			font-weight: 700;
			color: @black;
			
			&:hover {
				color: @white;
			}
		}
		
		a {
			.extend;
			padding-top: 15px;
			padding-bottom: 15px;
			display: block;
			border-bottom: 1px solid @light_grey;
			color: lighten(@black, 20%);
			text-decoration: none;
			
			&:hover, &:focus {
				background-color: @accent;
				color: @white;
				
				.count {
					background-color: @white;
					color: @accent;
					text-shadow: none;
				}
			}
		}
		
		.count {
			float: right;
			background-color: darken(@light_grey, 10%);
			font-weight: 600;
			color: @white;
			display: inline-block;
			width: 20px;
			font-size: 11px;
			height: 20px;
			text-align: center;
			.border-radius(3px);
		}
	}
	
	.price-filter {
		
		.ui-slider {
			background-color: @light_grey;
			border: 1px solid darken(@light_grey, 10%);
			height: 10px;
			position: relative;
			margin-bottom: 20px;
			
			.border-radius(9999px);
			.box-shadow(inset 0 1px 2px fadeout(@black, 80%));
			
			.ui-slider-range {
				height: 100%;
				position: absolute;
				top: -1px;
				z-index: 10;
				background-color: @accent;
				border-top: 1px solid darken(@accent, 10%);
				border-bottom: 1px solid darken(@accent, 10%);
				.border-radius(9999px);
				.box-shadow(inset 0 1px 2px fadeout(@black, 80%));
			}
			
			.ui-slider-handle {
				position: absolute;
				width: 16px; height: 16px;
				margin-left: -8px;
				margin-top: -2px;
				background: url('../../img/ui-slider-handle.png') no-repeat;
				z-index: 20;
				
				&:focus {
					outline: 0 none;
				}
			}
		}
		
		#slider {
			margin-top: 20px;
		}
		
		#slider-label {
			font-size: 12px;
			color: lighten(@black, 30%);
			
			strong {
				color: @accent;
			}
		}
		
	}
	
	.best-selling {
		.hgroup.title {
			margin-bottom: 20px;
		}
	}
}

/*---
| PRODUCT LIST
---*/

#load_more {
	[class^="icon-"] {
		display: none;
	}

	.icon-spin {
		.animation-duration(1s);
	}
}

#load_more.loading {
	.opacity(0.5);
	
	[class^="icon-"] {
		display: inline-block;
	}
}

.product-list {
	margin-left: -30px;
	overflow: visible !important;
	.clearfix();

	@media (min-width: 768px) and (max-width: 979px) {
		margin-left: -20px;
	}
	
	@media (max-width: 767px) {
		margin-left: -20px;
	}
	
	@media (max-width: 480px) {
		margin-left: 0;
	}
	
	li {
		list-style: none;
		width: 270px;
		float: left;
		margin-left: 30px;
		margin-bottom: 30px;
		
		@media (min-width: 980px) and (max-width: 1199px) {
			width: 213px;
		}
		
		@media (min-width: 768px) and (max-width: 979px) {
			width: 166px;
			margin-left: 20px;
			margin-bottom: 20px;
		}
		
		@media (max-width: 767px) {
			width: 210px;
			margin-left: 20px;
			margin-bottom: 20px;
		}
		
		@media (max-width: 480px) {
			width: 300px;
			margin-left: 0;
			margin-bottom: 20px;
		}
	}
	
	li.featured {
		width: 570px;
		
		@media (min-width: 980px) and (max-width: 1199px) {
			width: 456px;
		}
		
		@media (min-width: 768px) and (max-width: 979px) {
			width: 352px;
		}
		
		@media (max-width: 767px) {
			width: 440px;
		}
		
		@media (max-width: 480px) {
			width: 300px;
		}
	}
	
	a {
		position: relative;
		display: block;
		color: inherit;
		text-decoration: none;
		z-index: 20;
		.box-shadow(0 1px 2px fadeout(@black, 80%));
		
		&:hover {
			.box-shadow(0 2px 3px fadeout(@black, 50%));
			
			.image .secondary {
				.opacity(1);
			}
			
			.title .rating {
				color: @accent;
			}
		}
		
		
		.image {
			position: relative;
			background: @white url('../../img/preloader.gif') no-repeat center center;
			
			img {
				display: block;
				width: 100%;
			}
			
			.secondary {
				position: absolute;
				top: 0;
				.transition(~"all 200ms ease-in-out");
				.opacity(0);
			}
			
			.badge-sale {
				position: absolute;
				right: -10px; top: 40px;
				background-color: @accent;
				font-size: 12px;
				line-height: 12px;
				padding: 4px 8px;
				text-transform: uppercase;
				.border-radius(@radius @radius 0 @radius);
				
				&:after {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border: 10px solid;
					border-color: darken(@accent, 20%) transparent transparent transparent;  
					position: absolute;
					right: 0; bottom: -20px;
					z-index: -10;
				}
			}
		}
		
		.title {
			padding: 20px;
			position: relative;
			background-color: @white;
			
			&:before {
				content: "";
				display: block;
				width: 16px; height: 16px;
				background-color: @white;
				position: absolute;
				left: 20px; top: -8px;
				.rotate(45deg);
			}
			
			.prices {
				text-align: right;
				float: right;
				margin-left: 20px;
				line-height: 20px;
				height: 20px;
				
				.price {
					color: @accent;
					font-weight: 600;
					font-size: 14px;
				}
				
				.base {
					color: lighten(@black, 50%);
					font-weight: 400;
					font-size: 11px;
				}
			}
			
			h3 {
				margin: 0;
				font-size: 14px;
				line-height: 20px;
				font-weight: 700;
			}
			
			.rating {
				margin-top: 10px;
				font-size: 12px;
				line-height: 15px;
				color: lighten(@black, 50%);
			}
			
		}
	}
}

/*---
| PRODUCT LIST SMALL
---*/

.product-list-small {
	list-style: none;
	margin: -20px;

	li {
		border-bottom: 1px solid @light_grey;
		padding: 15px 20px;
		.clearfix();
	}
	
	.image {
		display: block;
		float: left;
		margin-right: 20px;
		width: 60px;
		.box-sizing(border-box);
		
		a {
			display: block;
			border: 4px solid @light_grey;
			position: relative;
			
			&:before {
				content: "";
				width: 100%; height: 100%;
				position: absolute;
				top: 0; left: 0;
				background-color: @black;
				.transition(all 200ms ease-in-out);
				.opacity(0);
			}
			
			&:hover {
				border-color: @accent;
				
				&:before {
					.opacity(0.5);
				}
			}
		}
		
		img {
			display: block;
		}
	}
	
	.desc {
		float: left;
		
		
		h6 {
			font-size: 13px;
			line-height: 16px;
			font-weight: 700;
			margin-bottom: 10px;
			
			a {
				color: @black;
				text-decoration: none;
				
				&:hover {
					color: @accent;
				}
			}
		}
		
		.price {
			display: block;
			font-size: 12px;
			line-height: 18px;
			color: lighten(@black, 25%);
			margin-bottom: 10px;
			
			.label {
				margin-left: 5px;
			}
		}
		
		.rating {
			font-size: 12px;
			line-height: 15px;
			color: lighten(@black, 25%);
			position: relative;
			bottom: -10px;
			.opacity(0);
			.transition(all 0.3s ease-in-out);
			
			a {
				color: lighten(@black, 50%);
				font-size: 10px;
				text-decoration: none;
				
				&:hover {
					color: @accent;
				}
			}
		}
	}
	
	li:hover .desc .rating {
		color: @accent;
		bottom: 0;
		.opacity(1);
	}
}

/*--
| RATINGS SMALL
---*/

.ratings-small {
	list-style: none;
	margin: -20px;

	li {
		border-bottom: 1px solid @light_grey;
		padding: 15px 20px;
		.clearfix();
	}
	
	.image {
		display: block;
		float: left;
		margin-right: 20px;
		width: 40px;
		.box-sizing(border-box);
				
		img {
			border: 4px solid @light_grey;
			display: block;
		}
	}
	
	.desc {
		float: left;
		
		
		h6 {
			font-size: 13px;
			line-height: 16px;
			font-weight: 700;
			margin-bottom: 0;
		}
		
		small {
			display: block;
			font-size: 12px;
			line-height: 18px;
			color: lighten(@black, 25%);
			margin-bottom: 10px;
		}
		
		.rating {
			font-size: 12px;
			line-height: 15px;
			color: lighten(@black, 25%);
			position: relative;
			bottom: -10px;
			.opacity(0);
			.transition(all 0.3s ease-in-out);
		}
	}
	
	li:hover .desc .rating {
		color: @accent;
		bottom: 0;
		.opacity(1);
	}
}

/*---
| FLEXSLIDER
---*/

.flexslider {
	margin: 0;
	padding: 0;
}

.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
}

.flexslider .slides img {
	width: 100%;
	display: block;
}

.flex-pauseplay span {
	text-transform: capitalize;
}

.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
} 

html[xmlns] .slides {
	display: block;
} 

* html .slides {
	height: 1%;
}

.no-js .slides > li:first-child {
	display: block;
}

.flexslider {
	margin: -40px 0 80px;
	position: relative;
	z-index: 10;
	border: none;
	background-color: transparent;
	.box-shadow(0 1px 2px fadeout(@black, 90%));
	
	.slides {
		li {
			list-style: none;
		}
	}
		
	
	.flex-control-nav {
		margin: 0;
		position: absolute;
		bottom: 15px;
		width: 100%;
		text-align: center;
		
		li {
			list-style: none;
			display: inline-block;
			margin: 0 5px;
		}
		
		a {
			text-decoration: none;
			display: block;
			width: 12px; height: 12px;
			background-color: transparent;
			text-indent: -9999px;
			border: 2px solid @white;
			cursor: pointer;
			.box-shadow(0 1px 2px fadeout(@black, 50%));
			.box-sizing(border-box);
			.border-radius(9999px);
			.background-clip(border-box);
			
			&:hover {
				background-color: fadeout(@white, 50%);
			}
		}
		
		a.flex-active {
			background-color: @white;
		}
	}
	
	.flex-direction-nav {
		position: absolute;
		top: 50%;
		width: 100%;
		margin: -50px 0 0;
		.clearfix();
		
		li {
			display: block;
			list-style: none;
			float: right;
			padding-right: 20px;
			
			a {
				background: url('../../img/rarr.png') no-repeat center center;
				text-decoration: none;
			}
			
			&:first-child {
				float: left;
				padding-right: 0;
				padding-left: 20px;
				
				a {
					background-image: url('../../img/larr.png');
				}
			}
		}
		
		a {
			display: block;
			width: 55px;
			height: 102px;
			text-indent: -9999px;
			text-decoration: none;
			.transition(~"all 200ms ease-in-out");
			.opacity(0.5);
			
			&:hover {
				.opacity(1);
			}
			
			&:focus, &:active {
				outline: 0 none;
			}
		}
		
		.flex-prev { left: 0; }
		.flex-next { right: 0; }
		
		.flex-prev, .flex-next {
			position: static;
		}
	}
	
	.flex-progress {
		bottom: 0;
		position: absolute;
		width: 100%;
		z-index: 20;
		background-color: fadeout(@black, 80%);
		
		span {
			display: block;
			height: 5px;
			background-color: @accent;
			width: 0%;
		}
	}
	
}

@media (max-width: 479px) {
	.flex-control-nav {
		display: none;
	}
}

/*--
| CAPTIONS (used with Flex)
---*/


.caption {
	position: absolute;
	top: 50%; bottom: auto;
	width: 100%;
	margin-top: -85px;
	padding: 0;
	background-color: transparent;
	overflow: visible;
	font-family: inherit !important;
	.opacity(1);
	
	@media (min-width: 768px) and (max-width: 979px) {
		margin-top: -75px;
	}
	
	@media (max-width: 767px) {
		display: none !important;
		.opacity(0) !important;
	}
	
	h3 {
		display: inline-block;
		font-weight: 700;
		padding: 10px 20px;
		background-color: @accent;
		color: @white;
		margin-bottom: 0;
		line-height: 54px;
		
		@media (min-width: 768px) and (max-width: 979px) {
			font-size: 24px;
			line-height: 36px;
		}
	}
	
	p {
		display: inline-block;
		padding: 10px 20px;
		background-color: fadeout(@black, 20%);
		color: @white;
		font-size: 16px; line-height: 24px;
		margin-bottom: 20px;
		
		@media (min-width: 768px) and (max-width: 979px) {
			font-size: 12px;
			line-height: 18px;
		}
	}
	
	.btn {
		display: inline-block !important;
		border-bottom: none !important;
	}
}
		
/*---
| PROMOS
---*/

.promos {
	margin-bottom: 60px;
	
	.box {
		color: lighten(@black, 30%);
	}
	
	.hgroup.title {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 20px;
	}
	
	p {
		margin-bottom: 0;
		font-size: 12px;
		line-height: 18px;
	}
	
	img {
		float: right;
		margin: 0 0 10px 10px;
	}
	
	.low-price img {
		margin-top: -25px;
	}
}


/*---
| JCAROUSEL
---*/

.jcarousel-wrapper {
    position: relative;
}

.jcarousel {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	
	ul {
		width: 20000em;
		position: absolute;
		list-style: none;
		margin-bottom: 0;
	}
	
	li {
		margin-bottom: 0;
	}
	
	a {
		margin: 0 4px 6px;
		text-decoration: none;
	}
}

.jcarousel-controls {
	.clearfix();
	
	.carousel-control-prev,
	.carousel-control-next {
		display: block;
		line-height: 24px;
		width: 24px; height: 24px;
		text-align: center;
		background-color: @black;
		color: @white;
		float: left;
		margin: 4px 0;
		
		&:hover, &:focus {
			background-color: @accent;
		}
	}
	
	.carousel-control-prev {
		margin-right: 1px;
	}
}

/*---
| HOME / FEATURED
---*/

.featured {
	margin-bottom: 80px;
}

/*---
| PRODUCT
---*/

.product-info {
	margin-bottom: 80px;
}

.product-info .product-content {
	.nav-tabs {
		margin: -20px -20px 20px;
	}
	
	.tab-content {
		overflow: visible;
	}
	
	#product {
		.details, .short-description, .options, .extras, .add-to-cart {
			padding: 20px 0;
		}
		
		.details { padding-top: 0; }
		.add-to-cart { padding-bottom: 0; }
		
		form {
			> div {
				border-bottom: 1px solid @light_grey;
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
		
		.details {		
			h1 {
				margin: 0 0 10px;
				font-size: 24px;
				line-height: 30px;
			}
			
			.prices {
				line-height: 24px;
				margin: 0 0 20px;
				
				.price {
					color: @accent;
					font-weight: 600;
					font-size: 20px;
				}
				
				.base {
					color: lighten(@black, 50%);
					font-size: 14px;
					font-weight: 400;
				}
				
			}
			
			
			.meta {
				color: lighten(@black, 10%);
				font-size: 12px;
				text-decoration: none;
				.clearfix();
				
				> div {
					float: left;
					margin-right: 20px;
					
					i {
						margin-right: 2px;
					}
				}
				
				.categories {
					a {
						color: inherit;
						text-decoration: none;
						
						&:after {
							content: ", ";
						}
						
						&:last-child:after {
							content: "";
						}
						
						&:hover {
							color: @accent;
						}
					}
				}
			}
		}
		
		.short-description {
			color: lighten(@black, 30%);
			font-size: 14px;
			
			p {
				margin-bottom: 0;
			}
		}
		
		.extra {
			float: left;
			margin-right: 20px;
		}
	}
	
	#description {
		font-size: 13px;
		
		> *:last-child {
			margin-bottom: 0;
		}
		
		ul, ol {
			li {
				list-style-position: inside;
			}
		}
	}
}
	
.product-info .product-images {
	.box {
		margin-bottom: 0;
	}
	
	.primary {
		margin: -20px -20px 0;
	}
	
	.thumbs {
		margin: 0 -20px;
		padding: 20px;
		position: relative;
		
		&:before {
			content: "";
			display: block;
			width: 16px; height: 16px;
			background-color: @white;
			position: absolute;
			left: 20px; top: -8px;
			z-index: 0;
			.rotate(45deg);
		}
		
		.thumbs-list {
			margin-left: -3%;
			margin-bottom: -3%;
			.clearfix();
			
			li {
				width: 17%;
				float: left;
				margin-left: 3%;
				margin-bottom: 3%;
				list-style: none;
				
				a {
					display: block;
					border: 4px solid @light_grey;
					position: relative;
					text-decoration: none;
					.transition(all 200ms ease-in-out);
					
					&:before {
						content: "";
						width: 100%; height: 100%;
						position: absolute;
						top: 0; left: 0;
						background-color: @black;
						.transition(all 200ms ease-in-out);
						.opacity(0);
					}
					
					&:hover {
						border-color: @accent;
						
						&:before {
							.opacity(0.5);
						}
					}
				}
				
				a.active { border-color: @accent; }
				
				img {
					display: block;
				}
			}
		}
	}
}

.product-info .social {
	margin: 0 -20px -20px;
	padding: 20px;
	border-top: 1px solid @light_grey;
	background-color: darken(@white, 2.5%);
	
	#sharrre {
		text-align: center;
		> div {
			display: inline-block;
		}
	}
}

.product-reviews {
	padding: 80px 0;
	background-color: @white;	
	.box-shadow(0 -1px 2px fadeout(@black, 80%), 0 1px 2px fadeout(@black, 80%));
	
	h5 {
		text-align: center;
		margin-bottom: 40px;
		
		.script {
			display: inline-block;
			margin: 0 5px;
			color: @accent;
			.rotate(-15deg);
		}
	}
}

.fb-comments,
.fb-comments > span,
.fb-comments iframe[style] {
	width: 100% !important;
}

.product-related {
	padding-top: 80px;
	
	h5 {
		text-align: center;
		margin-bottom: 40px;
	}
}

.comment-item,
.rating-item {
	border-top: 1px solid @light_grey;
	margin-top: 20px;
	padding-top: 20px;
	
	.gravatar {
		float: left;
		margin-right: 10px;
	}
	
	h6 {
		font-size: 14px;
		line-height: 18px;
		font-weight: 700;
		margin-bottom: 0;
	}
	
	small {
		font-size: 12px;
		line-height: 18px;
		color: lighten(@black, 25%);
	}
	
	h5 {
		font-size: 16px;
		line-height: 18px;
		font-weight: 700;
		margin-bottom: 18px;
	}
	
	p {
		font-size: 12px;
		line-height: 18px;
		color: lighten(@black, 12.5%);
		margin-bottom: 0;
	}
	
	.rating {
		font-size: 12px;
		color: lighten(@black, 25%);
	}
	
	&:first-child {
		margin-top: 0;
		border-top: none;
		padding-top: 0;
	}
}

#ratings .well {
	color: lighten(@black, 12.5%);
	
	h6 {
		font-size: 16px;
		line-height: 16px;
		font-weight: 700;
		margin-bottom: 8px;
	}
}

/*---
| NAV-TABS
---*/

.nav-tabs {
	border-bottom: 5px solid @accent;
	margin-bottom: 0;
	background-color: @white;
	
	li {
		margin-bottom: 0;
		
		> div,
		a, a:hover, a:active, a:focus {
			text-decoration: none;
			margin-right: 0px;
			padding: 14px 20px 9px;
			border: none;
			font-size: 12px;
			color: lighten(@black, 20%);
			text-transform: uppercase;
			background-color: @white;
			outline: 0 none;
			.border-radius(0);
			
			[class^="icon-"],
			[class*=" icon-"] {
				margin: 0 0 6px;
				display: block;
				text-align: center;
			}
			
			span {
				display: block;
				text-align: center;
			}
		}
		
		a:hover {
			color: @accent;
		}
	}
	
	li.active {
		> div,
		a, a:hover, a:active, a:focus {
			border: none;
			background-color: @accent;
			color: @white;
		}
	}
}

.nav-tabs + .box {
	position: relative;
	z-index: 10;
}

.nav-tabs.nav-stacked {
	
	> li:first-child > a,
	> li:last-child > a {
		.border-radius(0);
	}
	
	> li > a {
		border: none;
		border-bottom: 1px solid darken(@light_grey, 5%);
		background-color: @lighter_grey;
		padding: 15px 20px;
		text-transform: none;
		
		&:hover, &:active, &:focus {
			border-bottom: 1px solid @accent;
			background-color: @accent;
			color: @white;
		}
	}
		
	li.active {
		position: relative;

		a {
			border-right: none;
			border-bottom: 1px solid darken(@light_grey, 5%);
			background-color: @white;
			color: @accent;
			font-weight: 700;
		}
		
		&:after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 1px;
			right: -1px;
			width: 1px;
			background-color: @white;
		}
	}

}


/*---
| CART
---*/

.cart-items {
	.col_product {
		.image {
			float: left;
			margin-right: 20px;
			
			
			a {
				display: block;
				border: 4px solid @light_grey;
				position: relative;
				
				&:before {
					content: "";
					width: 100%; height: 100%;
					position: absolute;
					top: 0; left: 0;
					background-color: @black;
					.transition(all 200ms ease-in-out);
					.opacity(0);
				}
				
				&:hover, &:focus {
					border-color: @accent;
					
					&:before {
						.opacity(0.5);
					}
				}
			}
			
		}
		
		h5 {
			margin: 0 0 10px;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0;
			
			a {
				color: inherit;
				
				&:hover, &:focus {
					color: @accent;
				}
			}
		}
		
		.options,
		.extras {
			li {
				list-style: none;
				font-size: 12px;
				text-transform: uppercase;
				color: lighten(@black, 20%);
				
				&:before {
					content: "\f105";
					color: @accent;
					font-family: FontAwesome;
					margin-right: 5px;
				}
			}
		}
	}
	
	.col_remove {
		a {
			text-decoration: none;
		}
	}
	
	.col_qty {
		input[type="text"] {
			width: 20px;
			text-align: right;
		}
	}
	
	.col_single,
	.col_total,
	.col_discount {
		.single-price,
		.total-price,
		.discount {
			font-size: 13px;
			font-weight: 600;
		}
	}
}
@media (max-width: 980px) {

	.styled-table.orders,
	.cart-items {
		thead{
			display: none;
		}

		tbody{
			width: 100%;

			tr{
				overflow: hidden;
				height: auto;
				width: 100%;
				
				border: 1px solid darken(@light_grey, 5%);
				

				td{
					display: block;
					text-align: left;
					padding-left: calc(~'50% + 10px');
					position: relative;

					
					
					&:first-child{
						padding: 10px;	
						padding-left: calc(~'50% + 10px');
					}


					overflow: hidden;
					height: auto;

					border-bottom: 1px solid @light_grey;

					&.text-right{
						text-align: left;
					}	
					
					&:before{
						content: attr(data-title);
						display: block;
						/*float: left;
						width: 50%;*/
						font-weight: bold;
						position: absolute;
						left: 0px;
						top: 0px;
						padding: 10px;
						.box-sizing(border-box);
						width: 50%;
						height: 100%;
						background-color: darken(@white, 2.5%);

						
						
					}
				}		
			}
			
		}
		
	}
}

.cart .coupon {
	form {
		margin: 20px 0 0;
	}
	
	.input-append {
		margin-bottom: 0;
		width: 100%;
		
		input[type="text"],
		button {
			.box-sizing(border-box);
		}
		
		input[type="text"] {
			width: 80%;
			height: 30px;
		}
		
		button {
			width: 20%;
		}
	}
}

/*---
| CHECKOUT
---*/

.checkout {
	
	.nav-tabs {
		margin: -20px -20px 20px;
		
		li {
			width: 20%;
			
			@media (max-width: 480px) {
				width: 33.33%;
			}
			
			> div {
				.opacity(0.5);
			}
		}
	}
	
}

.checkout .shipping-methods,
.checkout .payment-methods {
	.box-content {
		.clearfix();
	
		.price {
			float: left;
		}
		
		input {
			float: right;
		}
	}
}


/*---
| STATIC PAGE
---*/

.static-page {
	.box;
	padding: 0;
	background-color: @white;
	
	> .row-fluid {
		position: relative;
		
		@media (max-width: 767px) {
			position: static;
		}
		
		> .span3 {
			position: absolute;
			top: 0; bottom: 0;
			background-color: @lighter_grey;
			border-right: 1px solid darken(@light_grey, 5%);
			
			@media (max-width: 767px) {
				position: static;
				top: auto; bottom: auto;
			}
		}
		
		> .span9 {
			margin-left: 25.641%;
			min-height: 600px;
			
			@media (max-width: 767px) {
				margin-left: 0;
			}
		}
		
	}
	
	.content {
		padding: 30px 60px 30px 30px;
		min-height: 260px;
		
		@media (max-width: 767px) {
			padding: 30px 60px;
		}
		
		.row,
		.row-fluid {
			margin-bottom: 20px;
		}
		
		ul ul,
		ol ol,
		ul ol,
		ol ul {
			padding-left: 40px;
		}
	}
}

/*---
| SEARCH
---*/

.filter {
	.control-group, input, select, textarea {
		margin-bottom: 0;
	}
}

/*---
| WELL
---*/

.well {
	border: 1px solid darken(@lighter_grey, 10%);
	color: lighten(@black, 10%);
	padding: 20px;
	margin-bottom: 40px;
	background-color: @lighter_grey;
	.border-radius(@radius);
	.box-shadow(none);
	.clearfix();
	
	*:last-child {
		margin-bottom: 0;
	}
}

.well-large {
	padding: 40px;
}

/*---
| OPTIONS PANEL
---*/

.options-panel {
	position: fixed;
	top: 200px;
	left: -240px;
	z-index: 1000;
	width: 272px;
	.clearfix();
	
	.options-panel-content {
		width: 200px;
		padding: 20px;
		background-color: @white;
		float: left;
		.box-shadow(0 1px 2px fadeout(@black, 80%));
	}
	
	.options-panel-toggle {
		float: left;
		width: 32px;
		height: 32px;
		
		a {
			display: block;
			width: 32px;
			height: 32px;
			font-size: 16px;
			line-height: 32px;
			text-align: center;
			background-color: @accent;
			color: @white;
			text-decoration: none;
		}
	}
}

/*---
| HERO UNIT
---*/

.hero-unit {
	border: 1px solid darken(@light_grey, 5%);
	background-color: @light_grey;
	.border-radius(@radius);
}

/*---
| GRIDS
---*/

.show-grid [class*="span"] {
	background-color: @light_grey;
	text-align: center;
	line-height: 40px;
	font-size: 12px;
	.border-radius(@radius);
}

/*---
| ORDER HISTORY
---*/

.orders,
.order {
	tbody {
		line-height: 28px;
		font-size: 12px;
	}
}

/*---
| LABEL
---*/

.label {
	.border-radius(@radius);
	font-size: 10px;
	line-height: 14px;
	padding: 2px 6px;
	text-transform: uppercase;
	text-shadow: none;
	letter-spacing: 0.5px;
}

.label-sale {
	background-color: @accent;
}

/*---
| ALERTS
---*/

.alert {
	font-size: 13px;
	.border-radius(@radius);
}

/*---
| WIDGET
---*/

.widget {
	background-color: @white;
	border-top: 5px solid @accent;
	padding: 20px;
	margin-bottom: 20px;
	.border-radius(@radius);
	.box-shadow(0 1px 2px fadeout(@black, 75%));
	
	h3.widget-title {
		font-size: 16px;
		line-height: 24px;
		font-weight: 700;
		padding: 20px;
		margin: -20px -20px 20px;
		border-bottom: 1px solid @light_grey;
	}
}

.widget.Categories,
.widget.Menu {
	ul {
		list-style: none;
		margin: 0;
	}

	> ul {
		margin: -20px -20px;
	}
	
	li {
		
	}
	
	a {
		display: block;
		padding: 15px 20px;
		border-bottom: 1px solid @light_grey;
		color: lighten(@black, 20%);
		text-decoration: none;
		font-size: 12px;
			
		&:hover, &:focus {
			background-color: @accent;
			color: @white;
			
			.count {
				background-color: @white;
				color: @accent;
				text-shadow: none;
			}
		}
	}

	ul ul a {
		padding-left: 40px;
	}
}


/*---
| ADVERTS
---*/

.adverts {
	list-style: none;
	margin: 0;
	
	li + li {
		margin-top: 20px;
	}
	
	a {
		display: block;
		border: 5px solid @light_grey;
		position: relative;
		overflow: hidden;

		&:before {
			content: "";
			width: 100%; height: 100%;
			position: absolute;
			top: 0; left: 0;
			background-color: fadeout(@black, 80%);
			.transition(all 0.3s ease-in-out);
			.opacity(0);
		}
		
		&:hover {
			border-color: @accent;
			
			&:before {
				.opacity(1);
			}
		}
	}
}



/*---
| ISOTOPE
---*/

.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
}

.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	transition-property: transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s;
}

/*---
| BLOG
---*/

.post-list {
	margin-left: -30px;
	.clearfix();
	
	@media (min-width: 980px) and (max-width: 1199px) {
		margin-left: -20px;
	}
	
	@media (max-width: 979px) {
		margin-left: 0;
	}
}

.post-grid {
	float: left;
	margin-left: 30px;
	margin-bottom: 30px;
	width: 420px;
	
	@media (min-width: 980px) and (max-width: 1199px) {
		width: 345px;
		margin-left: 20px;
		margin-bottom: 20px;
	}
		
	@media (max-width: 979px) {
		width: 100%;
		margin-left: 0;
		margin-bottom: 20px;
		float: none;
	}
		
	.box {
		margin-bottom: 0;
	}
}

.post-meta {
	list-style: none;
	font-size: 12px;
	color: lighten(@black, 37.5%);
	margin: 10px 0 0;
	.clearfix();
	
	li {
		float: left;
		margin-right: 10px;
	}
}

/*---
| STORE LOCATOR
---*/

#td-store-locator-map.active-stores,
#td-store-locator-results.active-stores {
	height: 480px;
}



#td-store-locator-results.active-stores {
	overflow: auto;
	margin-bottom: 0;
	
	li {
		padding: 20px 20px 20px 0;
		border-top: 1px solid @light_grey;
	}
	
	li:first-child {
		border-top: none;
	}
	
	h3 {
		font-size: 14px;
		line-height: 18px;
		font-weight: 700;
		margin-bottom: 0;
	}
	
	small {
		display: block;
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 20px;
		color: lighten(@black, 50%);
		white-space: nowrap;
	}
	
	p {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 0;
		
		img {
			margin: 0 10px 10px 0;
			float: left;
		}
	}
}

.store_locator .well {
	margin-bottom: 40px;
	
	@media (max-width: 979px) {
		input[type="text"], select, .btn {
			margin-bottom: 10px;
		}
		
		.btn.btn-primary {
			margin-bottom: 0;
		}
	}
		
}


#td-store-locator-map *,
#td-store-locator-map *:after,
#td-store-locator-map *:before {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#td-store-locator-map img {
    max-width: none; height: auto;
}

#td-store-locator-form{
	
	@media (max-width: 767px) {	
		.row-fluid [class*="span"]{			
			margin-bottom: 10px;									
		}
		.row-fluid [class*="span"] .btn-mini{			
			margin-bottom: 20px;									
		}
	}
	
}

/*---
| ROW COLLAPSE
---*/

.row-collapse {
	@media (min-width: 980px) {
		[class*="span"] {
			margin: 0;
		}
		
		.span1 { width: 8.33%; }
		.span2 { width: 16.66%; }
		.span3 { width: 25%; }
		.span4 { width: 33.33%; }
		.span5 { width: 41.66%; }
		.span6 { width: 50%; }
		.span7 { width: 58.33%; }
		.span8 { width: 66.66%; }
		.span9 { width: 75%; }
		.span10 { width: 83.33%; }
		.span11 { width: 91.66%; }
		.span12 { width: 100%; }
	}
}

/*---
| POST MINI
---*/

.list-chevron.links {
	li {
		margin-bottom: 10px;
	}
	
	small {
		font-style: italic;
		color: lighten(@black, 25%);
		font-size: 11px;
		margin-left: 12px;
	}
}

/*---  BLOG VIDEO  ---*/
.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.flex-video.widescreen {
  padding-bottom: 53.25%;
}
.flex-video.vimeo {
  padding-top: 0;
}
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video {
    padding-top: 0;
  }
}











@import "custom.css";